<template>
  <div class="container">
    <el-card class="feature-tags">
      <div slot="header" v-if="sbjId">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>大数据</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <el-form ref="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="标签名称" label-width="80px">
              <el-input
                v-model.trim="page.tagName"
                @keyup.enter.native="searchState"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select
                v-model="page.state"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button @click="clearText">清除</el-button>
            <el-button type="primary" @click="searchState">搜索</el-button>
          </el-col>
          <el-col :span="6">
            <el-row type="flex" justify="end">
              <el-button
                type="text"
                icon="el-icon-arrow-left"
                v-if="sbjId"
                @click="$router.back()"
                >返回学科</el-button
              >
              <el-button type="success" @click="dialogVisible = true"
                >新增标签</el-button
              >
            </el-row>
          </el-col>
        </el-row>
      </el-form>

      <el-alert type="info" show-icon :closable="false">
        <span slot="title">数据一共{{ total }}条</span>
      </el-alert>

      <el-table
        :data="tableData"
        style="width: 100%"
        border=""
        v-loading="loading"
        element-loading-text="给我一点时间"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          type="index"
          label="序号"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="subjectName"
          label="所属学科"
          width="180"
        ></el-table-column>
        <el-table-column prop="tagName" label="标签名称"> </el-table-column>
        <el-table-column prop="creator" label="创建者"> </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            <span>{{
              scope.row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button size="medium" type="text" @click="handleStatus(row)">
              <span v-if="row.state === 0">启用</span>
              <span v-else>禁用</span>
            </el-button>
            <el-button
              size="medium"
              type="text"
              :disabled="row.state === 0 ? false : true"
              @click="edtiTags(row)"
              >修改</el-button
            >
            <el-button
              size="medium"
              type="text"
              :disabled="row.state === 0 ? false : true"
              @click="delteTags(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="end" style="height: 60px; padding: 20px">
        <el-pagination
          background
          @size-change="changeSize"
          @current-change="changePage"
          :current-page="page.page"
          :total="total"
          :page-size="page.pagesize"
          :page-sizes="[10, 12, 14, 16]"
          layout="prev, pager, next,sizes,jumper"
        >
        </el-pagination>
      </el-row>
    </el-card>

    <el-dialog
      :title="ruleForm.id ? '修改标签' : '新增标签'"
      :visible.sync="dialogVisible"
      width="30%"
      @close="btnCancel"
    >
      <el-form
        ref="tagsCatalog"
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="标签名称" prop="tagName" v-if="sbjId">
          <el-input
            style="width: 80%"
            v-model="ruleForm.tagName"
            placeholder="请输入标签名称"
          ></el-input>
        </el-form-item>
        <div v-else>
          <el-form-item label="所属学科">
            <el-select
              v-model="ruleForm.subjectID"
              placeholder="请选择"
              style="width: 80%"
            >
              <el-option
                v-for="item in selectForm"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签名称" prop="tagName">
            <el-input
              style="width: 80%"
              v-model="ruleForm.tagName"
              placeholder="请输入标签名称"
            ></el-input>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <el-row type="flex" justify="center">
          <el-col :span="6" style="text-align: center">
            <el-button size="small" @click="btnCancel">取消</el-button>
            <el-button type="primary" @click="btnOK" size="small"
              >确定</el-button
            >
          </el-col>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>
<script>

import { list, changeState, remove, update, detail, add } from '../../api/hmmm/tags'
import { status } from '../../api/hmmm/constants'
import { simple } from '../../api/hmmm/subjects'
export default {
  name: 'FeatureTags',
  props: {},
  components: {},
  data () {
    return {
      loading: false,
      // ?table表格数据
      tableData: [],
      // ? pagination分页数据
      page: {
        page: 1, // 页码
        pagesize: 10, // 每页条数
        tagName: '',
        state: null
      },
      total: 0, // 总数
      dialogVisible: false, // 控制新增目录弹层的显示与隐藏
      // 新增目录弹层数据
      ruleForm: {
        subjectID: null, // 学科ID
        tagName: null // 标签名称
      },
      // 弹层下拉数据
      selectForm: [],
      rules: {
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      } // 新增目录弹层规则
    }
  },
  created () {
    this.getTagsList()
  },
  computed: {
    status () {
      return status
    },
    sbjId () {
      return this.$route.query.id
    }
  },
  methods: {
    //! 1.获取所有标签列表-----------------------------------------------------------------------------------------------------
    async getTagsList () {
      this.loading = true
      const { data } = await list(this.page)
      this.total = data.counts
      this.tableData = data.items
      const { data: res } = await simple()
      this.selectForm = res
      this.loading = false
    },
    //! 2.改变状态按钮事件-----------------------------------------------------------------------------------------------------
    handleStatus (state) {
      this.$confirm('是否继续?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        const data = {
          id: state.id,
          state: state.state === 1 ? state.state = 0 : state.state = 1
        }
        await changeState(data)
        this.$message({
          type: 'success',
          message: '已成功!',
          showClose: true,
          duration: 1500
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    //! 3.pagination组件改变页码的事件-----------------------------------------------------------------------------------------
    changePage (val) {
      this.page.page = val
      this.getTagsList()
    },
    //! 4.pagination组件每页条数的事件-----------------------------------------------------------------------------------------
    changeSize (val) {
      this.page.pagesize = val
      this.getTagsList()
    },
    //! 5.点击搜索按钮查询事件-------------------------------------------------------------------------------------------------
    async searchState () {
      await list(this.page)
      this.getTagsList()
    },
    //! 6.点击清除按钮事件----------------------------------------------------------------------------------------------------
    clearText () {
      this.page.tagName = ''
      this.page.state = null
      this.getTagsList(this.page)
    },
    //! 7.点击table中删除按钮事件---------------------------------------------------------------------------------------------
    delteTags (id) {
      this.$confirm('此操作将永久删除该标签，是否继续?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async action => {
        await remove(id)
        this.$message({
          type: 'success',
          message: '删除成功!',
          showClose: true,
          duration: 1500
        })
        this.getTagsList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    //! 8.点击弹层框确认按钮事件---------------------------------------------------------------------------------------------------
    async btnOK () {
      await this.$refs.tagsCatalog.validate()
      if (this.ruleForm.id) {
        await update(this.ruleForm)
      } else if (this.sbjId) {
        await add({ subjectID: Number(this.sbjId), tagName: this.ruleForm.tagName })
      } else {
        await add(this.ruleForm)
      }
      this.$message.success('操作成功')
      this.dialogVisible = false
      this.getTagsList()
    },
    //! 9.点击弹层框取消事件---------------------------------------------------------------------------------------------------
    btnCancel () {
      this.$refs.tagsCatalog.resetFields()
      this.ruleForm = this.$options.data().ruleForm
      this.dialogVisible = false
    },
    //! 10.点击table中修改按钮事件---------------------------------------------------------------------------------------------
    async edtiTags (subjectID) {
      const { data } = await detail(subjectID)
      this.ruleForm = data
      this.dialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.feature-tags {
  padding: 0 20px;
}

.el-alert {
  margin: 15px 0;
}
[v-cloak] {
  display: none;
}
</style>
